<template>
  <el-select
    clearable
    v-model="modelValue"
    size="small"
    filterable
    remote
    reserve-keyword
    :placeholder="column.label"
    :remote-method="remoteMethod"
    @focus="productFocusAction"
    style="width: 100%">
    <el-option
      v-for="(option, index) in listOptions"
      :key="index"
      :label="option[column.searchLabel]"
      :value="option[column.searchKey]"></el-option>
  </el-select>
</template>
<script>
import vmodel from '@/mixins/vmodel';
export default {
  name: 'RemoteSelectField',
  mixins: [vmodel],
  data() {
    return {
      listOptions: [],
      condition: {}
    };
  },
  methods: {
    remoteMethod(query) {
      this.condition[this.column.searchLabel] = ['like', query];
      this.getListData();
    },
    clearProductAction() {
      this.$set(this, 'listOptions', []);
    },
    productFocusAction() {
      this.$set(this, 'condition', {});
      this.getListData();
    },
    getListData() {
      let action = this.column.searchAction  
      action({ page: 1, limit: 20, where: this.condition }).then(res => {
        this.$set(this, 'listOptions', res.data.data);
      });
    },
  },
};
</script>